import React from './react';
import ReactDOM from './react-dom';
/* 
组件的数据来源有两个地方，分别是属性对象和状态对象
属性是父组件传递过来的
状态是自己内部的,改变状态唯一的方式就是setState
属性和状态的变化都会影响视图更新
不要直接修改 State，构造函数是唯一可以给 this.state 赋值的地方 */
class ClassComponent extends React.Component{
  constructor(props){
    super(props)
    this.state={
      number:0
    }
  }
  handelClick = (e)=>{
    // debugger
/*     this.setState((state)=>({
      number:state.number+1
    }))
    this.setState((state)=>({
      number:state.number+1
    })) */
    this.setState({
      number:this.state.number+1
    })
    this.setState({
      number:this.state.number+1
    })
  }
  render(){
    return(
      <div className="title" style={{ color: 'red' }}><span>{this.props.name}<p>{this.state.number}</p><button onClick={this.handelClick}>+</button></span>{this.props.children}</div>
    )
  }
}
let element = <ClassComponent name="hello">world</ClassComponent>


ReactDOM.render(
  element,
  document.getElementById('root')
);
